<template>
  <div style="width:600px;height:400px;background:yellowgreen;margin:10px auto">
    <h1>我是根组件---里面H1</h1>
    <el-button></el-button>
  </div>
</template>

<script>
import ElButton from './components/ElButton.vue'
export default {
  name: '',
  components:{
    ElButton
  }
}
</script>


<style scoped>
/**开发项目的时候:经常书写组将的样式，一般都会加上scoped，导致样式算在局部样式，一般只是针对当前组件
    如果想让父组件影响到子组件的样式，需要用到深度选择器
    >>>:原生CSS 深度选择器
    /deep/: 一般   用于less样式的深度选择器
    ::v-deep:一般  用于scss 样式


    用途:一般修改第三方UI组件库的样式
**/
 ::v-deep h1{
    color:red;
  }
</style>
